<template>
    <el-form :model="form" label-width="120px" ref="add-form">
        <el-form-item label="名称" prop="name" :rules="[{required:true,message:'不能为空'}]">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
            <el-input v-model="form.type" style="width:200px;" />
            <span>自定义类型，32个字符以内</span>
        </el-form-item>
        <el-form-item label="所属门店" prop="shopId">
            <el-select v-model="form.shopId" placeholder="所属门店">
                <el-option :label="item.name" v-for="item in shop" :key="item.id" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="上级分类" prop="pid">
            <el-select v-model="form.pid" placeholder="请选择">
                <el-option :label="item.name" v-for="item in goods" :key="item.id" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="编号" prop="key">
            <el-input v-model="form.key" style="width:200px;" />
            <span>自定义类型，32个字符以内</span>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
            <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
                :on-change="handleChange1">
                <img style="width:100px;" v-if="form.icon" :src="form.icon" class="avatar" />
                <el-button v-else type="warning">上传图标</el-button>
            </el-upload>
            <el-input style="display:none;" v-model="form.icon" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图片" prop="pic">
            <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
                :on-change="handleChange2">
                <img style="width:100px;" v-if="form.pic" :src="form.pic" class="avatar" />
                <el-button v-else type="warning">上传图片</el-button>
            </el-upload>
            <el-input style="display:none;" v-model="form.pic" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序" prop="paixu" :rules="[{required:true,message:'不能为空'}]">
            <el-input v-model="form.paixu" />
        </el-form-item>
        <el-form-item label="状态" prop="isUse" :rules="[{required:true,message:'不能为空'}]">
            <el-radio-group v-model="form.isUse">
                <el-radio label="true">启用</el-radio>
                <el-radio label="false">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="内容">
            <!-- <Tinymce :value="form.content" @input="form.content = $event" style="width:100%;"></Tinymce> -->
            <Tinymce v-model="form.content" style="width:100%;"></Tinymce>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { shopList, goodsAdd } from "../api/goods"
import { goodsCateList } from "../api/goodsCate"
import { uploadFile } from "../api/index"
import Tinymce from "../views/Tinymce.vue"
export default {
    data() {
        return {
            form: {
                name: "",//	名称
                remark: "",//备注
                type: "",//	类型
                shopId: "",//所属门店
                pid: "",//上级分类
                key: "",//编号
                icon: "",//	图标
                pic: "",//图片
                paixu: "0",//排序
                isUse: "true",//状态	true启用/ false禁用
                content: "",//详细介绍
            },
            shop: [],//商店列表
            goods: [],//商品分类
        }
    },
    methods: {
        // 上传图标
        handleChange1(val) {
            const formData = new FormData();
            formData.append("upfile", val.raw)
            uploadFile(formData).then(res => {
                // console.log(res)
                this.form.icon = res.data.url
            })
        },
        // 上传图片
        handleChange2(val) {
            const formData = new FormData();
            formData.append("upfile", val.raw)
            uploadFile(formData).then(res => {
                // console.log(res)
                this.form.pic = res.data.url
            })
        },
        // 提交
        onSubmit() {
            this.$refs["add-form"].validate(val => {
                // console.log(val)
                if (val) {
                    goodsAdd(this.form).then(res => {
                        // console.log(res)
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: "添加成功",
                                duration: 1000,
                            })
                            this.$router.push("/product");
                        }
                    })
                }
            })
        },
        // 获取商店列表
        getShops() {
            shopList().then(res => {
                // console.log(res)
                if (res.code === 0) {
                    this.shop = res.data.result
                }
            })
        },
        // 获取商品分类
        getGoodsList() {
            goodsCateList().then(res => {
                if (res.code === 0) {
                    this.goods = res.data
                }
            })
        }
    },
    created() {
        this.getShops()
        this.getGoodsList()
    },
    components: {
        Tinymce
    }
}
</script>